<script setup lang="ts">
import AddRole from './components/AddRole.vue'

const tableData = ref([{
  name: '销售',
  description: '销售部门角色',
}, {
  name: '销售主管',
  description: '销售部门角色',
}, {
  name: '售前',
  description: 'xxx售前',
}, {
  name: '采购',
  description: 'xxx',
}, {
  name: '采购主管',
  description: 'xxx',
}, {
  name: '工程人员',
  description: 'xxx',
}, {
  name: '财务主管',
  description: 'xxx',
}, {
  name: '商务',
  description: 'xxx',
}, {
  name: '内审人员',
  description: 'xxx',
}, {
  name: '合同专员',
  description: 'xxx',
}, {
  name: '产品开发',
  description: 'xxx',
}, {
  name: '二线技术',
  description: 'xxx',
}, {
  name: '项目经理',
  description: 'xx',
}, {
  name: '交付经理',
  description: 'xx',
}])
const queryObj = ref({ conditions: [] })
const { data, tableLoading, page, size, total, queryData } = useTableList({
  queryObj,
  apikey: 'QueryRole',
})
const subject = '角色'

const { currentRow, display, submit, ovisible } = useSubmit({
  subject,
  createApikey: 'CreateRole',
  updateApiKey: 'UpdateRole',
  onCreated: () => { page.value = 1; queryData() },
})
const { deleteOptions, openDelete, deleteDone } = useDelete({
  subject,
  apikey: 'DeleteRole',
  onDeleted: queryData,
})

const options = reactive([
  {
    model: { name: 'name', op: 'like', value: '' },
    ways: [
      {
        name: 'name',
        op: 'like',
        label: '名称',
        placeholder: '请输入业务分类名称',
      },
    ],
  },
])
</script>

<template>
  <div>
    <ListLayout>
      <template #header>
        <el-button type="primary" @click="display({})">
          添加角色
        </el-button>
        <SearchGroup v-model="queryObj.conditions" :options="options" @search="queryData" />
      </template>
      <template #content>
        <BaseTable
          v-model:size="size"
          v-model:page="page"
          :loading="tableLoading"
          :data="tableData"
          :total="total"
        >
          <el-table-column prop="name" label="角色名称" />
          <el-table-column prop="description" label="角色描述" />
          <el-table-column prop="createDate" label="创建时间">
            <template #default="{ row }">
              <TimeFormat :time="row.createDate" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-dropdown>
                <MoreText />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="display(row)">
                      修改
                    </el-dropdown-item>
                    <el-dropdown-item @click="openDelete(row)">
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </BaseTable>
      </template>
    </ListLayout>
    <AddRole v-model="ovisible" :current-row="currentRow" @done="submit" />
    <ConfirmDialog v-model="deleteOptions" @done="deleteDone" />
  </div>
</template>
